<template>
    <div id="editor">

      <el-container>
        <!-- <el-header>Header</el-header> -->
        <el-main style="height:700px"><mavon-editor v-model="value" style="height: 100%" :ishljs = "true" ref="md" ></mavon-editor></el-main>
        <el-footer><el-row :gutter="20">
            <el-col :span="10" :offset="11">
  
              <hideForm v-on:onSubmit="onSubmit" ></hideForm>

            </el-col>
        </el-row></el-footer>
    </el-container>
        
    </div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// import hideForm from "@/components/HideForm"
import hideForm from '../components/HideForm'
// import { insertArticle } from '@/api/article';
export default {
    name: 'editor',
    data(){
      return{
          value:""
      }
    },
    components: {
        mavonEditor,
        hideForm
        // or 'mavon-editor': mavonEditor
    },
    methods:{
      onSubmit:function(data){
          data.value=this.value
          this.insertArticle(data)
      },

    //   async insertArticle(data){
    //     const {data:res} =await this.$http.post('http://31f747b701.qicp.vip/blog/label-blog/insert',data)
    //   },
    //    async getArticle (articleId) {
    //   console.log('获取文章' + articleId)

    //   // const { data: res } = await this.$http.get(`/article/get/${articleId}`)
    //   const { data: res } = await this.$http.get(`http://31f747b701.qicp.vip/blog/article-blog/list/1/10}`)
    //   console.log(res)
    //   if (res.code !== 200) return this.$message.error('获取文章详情失败！')
    //   this.articleInfo = res.data.article
    //   console.log(this.articleInfo)

    //   // 因为后端需要根据旧分类查询 T-T
    //   this.editArticleFrom.oldCategories = this.articleInfo.categories
    //   // console.log('T_T')
    //   // console.log(this.editArticleFrom.oldCategories)
    // },
    // // 新建文章、编辑文章
    // async editArticle () {
    //   if (this.isBuild) {
    //     // 新建文章
    //     const { data: res } = await this.$http.post('http://31f747b701.qicp.vip/blog/article-blog/insert', this.articleInfo)
    //     console.log('新建文章')
    //     console.log(res)
    //     if (res.code !== 200) return
    //     this.$message.success('发布文章成功，等待后台管理员审核！')
    //   } else {
    //     // 编辑文章
    //     this.editArticleFrom.id = this.articleInfo.id
    //     this.editArticleFrom.title = this.articleInfo.title // 太难受了，因为字段不同的原因要每一项赋值，以匹配后端的参数，本来直接this.artcleInfo就可以
    //     this.editArticleFrom.content = this.articleInfo.content
    //     this.editArticleFrom.smallText = this.articleInfo.smallText
    //     this.editArticleFrom.categories = this.articleInfo.categories
    //     const { data: res } = await this.$http.post('/article/update', this.editArticleFrom)
    //     console.log('编辑文章')
    //     console.log(res)
    //     if (res.code !== 200) return
    //     this.$message.success('编辑文章成功，等待后台管理员审核！')
    //   }
    // },
    }
}
</script>
<style>
#editor {
    margin: auto;
    width: 80%;
    height: 100%px;
}

</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--<style lang='stylus' scoped>
.edit
  width 65%
  padding 0 20px
  box-sizing border-box
  h2
    line-height 100px
    color #555
    font-weight 500
    text-align center
  .content
    color #555
    line-height 2.5
    height 60%
    font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
  .mavonEditor 
    width: 100%;
    height: 100%;

</style>
